<template>
  <a-modal
    :visible="visible"
    :confirm-loading="confirmLoading"
    :title="
      item.id && item.id * 1 > 0
        ? '修改分类 `' + item.type_name + '`'
        : '添加分类'
    "
    :ok-text="'确认保存'"
    :mask-closable="false"
    @cancel="onClose"
    @ok="handleSubmit"
  >
    <a-form-model
      ref="formInline"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
      :model="formInline"
      @submit="handleSubmit"
    >
      <a-button v-show="false" html-type="submit" />

      <a-form-model-item label="名称" prop="type_name" required>
        <a-input
          v-model="formInline.type_name"
          :max-length="32"
          placeholder="请输入名称"
        />
      </a-form-model-item>

      <a-form-model-item label="标识" prop="type_abbreviation" required>
        <a-input
          v-model="formInline.type_abbreviation"
          :max-length="32"
          placeholder="请输入标识"
        />
      </a-form-model-item>

      <a-form-model-item label="分隔符" prop="type_separator" required>
        <a-input
          v-model="formInline.type_separator"
          :max-length="32"
          placeholder="请输入分隔符"
        />
      </a-form-model-item>

      <a-form-model-item label="类型" prop="data_type">
        <a-select v-model="formInline.data_type">
          <a-select-option :value="0">
            默认
          </a-select-option>
          <a-select-option :value="1">
            值类型
          </a-select-option>
        </a-select>
      </a-form-model-item>

      <a-form-model-item
        v-show="formInline.data_type == 1"
        label="值类型"
        prop="data_value_type"
      >
        <a-select v-model="formInline.data_value_type">
          <a-select-option :value="0">
            字符串
          </a-select-option>
          <a-select-option :value="1">
            数字
          </a-select-option>
        </a-select>
      </a-form-model-item>

      <a-form-model-item label="权重" prop="weight">
        <a-input-number v-model="formInline.weight" />
      </a-form-model-item>
    </a-form-model>

    <a-form-model-item :wrapper-col="buttonCol">
      <a-switch
        v-show="formInline.data_type == 0"
        v-model="formInline.type_class_flag"
        checked-children="层级: 单级"
        un-checked-children="层级: 树形"
        style="margin-right: 10px;"
        @change="
          (val) => {
            formInline.type_class = val ? 1 : 0
          }
        "
      />
      <a-switch
        v-model="formInline.status_flag"
        checked-children="状态: 正常"
        un-checked-children="状态: 停止"
        @change="
          (val) => {
            formInline.status = val ? 1 : 0
          }
        "
      />
    </a-form-model-item>
  </a-modal>
</template>

<script>
import systemAreaType from "@/api/systemAreaType"
export default {
  model: {
    //event:什么时候触发v-model行为
    event: "change-visible",
    // 定义传递给v-model的那个变量，绑定到哪个属性值上
    prop: "visible",
  },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    item: {
      type: Object,
      default: () => {
        return {
          id: 0,
          type_separator: "/",
          data_type: 0,
          data_value_type: 0,
          weight: 0,
          status: 1,
        }
      },
    },
  },
  data() {
    return {
      buttonCol: { span: 18, offset: 4 },
      labelCol: { span: 4 },
      wrapperCol: { span: 18 },
      confirmLoading: false,

      formInline: {
        ...this.item,
      },
    }
  },
  watch: {
    visible: function (showFlag) {
      if (!showFlag) return
      this.formInline = {
        type_class_flag: this.item.type_class == 1,
        status_flag: this.item.status == 1,
      }
      for (let ii in this.item) {
        this.$set(this.formInline, ii, this.item[ii])
      }
    },
  },
  created() {},
  mounted() {},
  methods: {
    onClose() {
      this.$emit("change-visible", false)
    },
    onChange() {
      this.onClose()
      this.$emit("change")
    },
    async handleSubmit(e) {
      e.preventDefault()

      let flag = undefined
      this.$refs.formInline.validate((valid) => (flag = valid))
      if (!flag) {
        return
      }

      this.confirmLoading = true

      if (this.$func.isNumber(this.item.id) && this.item.id * 1 > 0) {
        await systemAreaType
          .update(this.item.id, this.formInline)
          .then((response) => {
            if (response.code !== 1) {
              this.$message.error(response.message)
              return
            }
            this.$message.success(response.message)
            this.onChange()
            return
          })
          .catch((e) => {
            console.log(e)
          })
        this.confirmLoading = false
        return
      }

      await systemAreaType
        .create(this.formInline)
        .then((response) => {
          if (response.code !== 1) {
            this.$message.error(response.message)
            return
          }
          this.$message.success(response.message)
          this.onChange()
          return
        })
        .catch((e) => {
          console.log(e)
        })

      this.confirmLoading = false
    },
  },
}
</script>

<style lang="less" type="text/less" scoped>
.ant-form-item {
  margin-bottom: 6px;
}
</style>
